<template>
  <div>
    <div></div>
    <ul>
      <li>
        <router-link active-class="active" to="/home/message"
          >Message</router-link
        >
      </li>
      <li>
        <router-link active-class="active" to="/home/news">News</router-link>
      </li>
    </ul>
    <br />
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style lang="css" scoped>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #d4c8c8;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>>
